<!--
 * @Description: 
 * @Author: dh
 * @Date: 2021-09-09 17:11:34
 * @LastEditors: dh
 * @LastEditTime: 2025-09-04 09:53:56
-->
<!doctype html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width" />
	<title>JS Bin</title>
</head>

<body>
	<span>foo</span>
	<div id="container">
		<div class="item item-1">1</div>
		<div class="item item-2">2</div>
		<div class="item item-3">3</div>
		<div class="item item-4">4</div>
		<div class="item item-5">5</div>
		<div class="item item-6">6</div>
		<div class="item item-7">7</div>
		<div class="item item-8">8</div>
		<div class="item item-9">9</div>
	</div>
	<span>bar</span>

	<style>
		span {
			font-size: 2em;
		}

		#container {
			height: 500px;
			border: 1px solid red;
			display: grid;
			grid-template-columns: auto auto auto;
			grid-template-rows: auto auto auto;

			/* 用法同flex */
			/* 规定容器内部水平排列方式 用法同flex    start end center stretch（拉伸）默认 */
			justify-content: end;
			/* 规定容器内部垂直排列方式 用法同flex    start end center stretch（拉伸）默认 */
			align-content: center;
			/* 以上两个简写 */
			/* place-content: center; */

		}

		.item {
			font-size: 2em;
			text-align: center;
			border: 1px solid #e5e4e9;
		}

		.item-1 {
			background-color: #ef342a;
		}

		.item-2 {
			background-color: #f68f26;
		}

		.item-3 {
			background-color: #4ba946;
		}

		.item-4 {
			background-color: #0376c2;
		}

		.item-5 {
			background-color: #c077af;
		}

		.item-6 {
			background-color: #f8d29d;
		}

		.item-7 {
			background-color: #b5a87f;
		}

		.item-8 {
			background-color: #d0e4a9;
		}

		.item-9 {
			background-color: #4dc7ec;
		}
	</style>
</body>

</html>